<template>
    <el-dialog :visible.sync="modelValue" width="30%" :title="'换版本'" append-to-body :modal-append-to-body="false"
        :close-on-click-modal="false" top="5vh" @close="close">
        <div class="dialog-content">
            <div class="dialog-content-body">
                <div class="mr5">
                    <template v-if="listData && listData.length > 0">
                        <div :class="['list-cell', 'flex_between', currInfo.id == item.id ? 'active' : '']"
                            v-for="(item, index) in listData" :key="index" @click="chooseHandle(item)">
                            <div class="flex1">
                                <h3 class="font_black2">{{ item.title || '--' }}</h3>
                                <p class="ellipsis2 mt5" :title="item.txt_s || ''">{{ item.txt_s || '--' }}</p>
                            </div>
                            <div>
                                <div class="font_red" style="width: 240px;text-align: right;">
                                    <span class="font_size18">限时优惠价：</span>
                                    <span class="font_size18">￥{{ item.price || 0 }}</span>
                                </div>
                                <div style="width: 240px;text-align: right;">
                                    <span class="font_size18">原价：</span>
                                    <span class="font_black6 font_size18">￥{{ item.price0 || 0 }}</span>
                                </div>
                            </div>
                            <img v-if="currInfo.id == item.id" class="selete_img" src="static/icon/select.svg" alt="">
                        </div>
                    </template>
                    <empty v-else-if="listData && listData.length == 0" />
                    <div class="flex_center" v-if="listData && listData.length > 0">
                        <div class="mt10 mb20"> 暂无更多数据~ </div>
                    </div>
                </div>
            </div>
            <div class="flex_center dialog-content-footer">
                <el-button @click="close" size="small" style="width: 150px;"> 取消 </el-button>
                <el-button type="primary" @click="creatWxQrcode" size="small" style="width: 150px;"> 微信支付 </el-button>
            </div>
        </div>

        <el-dialog :visible.sync="modeQRlValue" width="20%" :title="'付款二维码'" append-to-body
            :modal-append-to-body="false" :close-on-click-modal="false" top="15vh" @close="closeQr">
            <view class="item-qr-box flex_center_column" id="qrBox" v-if="wxPayCodeurl">
                <ayQrcode ref="qrcode" qrcode_id="qrcode2" :modal="modal_qr" :url="wxPayCodeurl" :height="wh"
                    :width="wh" @hideQrcode="hideQrcode" themeColor="#000" />
                <h3 class="mt20 mb20"> 请用微信扫码完成支付 </h3>
            </view>
            <div class="flex_center dialog-content-footer">
                <el-button @click="closeQr" size="small" style="width: 150px;"> 取消 </el-button>
                <el-button type="primary" @click="compPayHandle" size="small" style="width: 150px;"> 我已支付，重新登录
                </el-button>
            </div>
        </el-dialog>

    </el-dialog>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, watch, onUnmounted, computed, onBeforeUnmount, defineProps, defineExpose, nextTick, defineEmits } from '@vue/composition-api'
import config from "@/js/conf/Config.js"
import https from "@/js/https/Https.js";
import localStore from "@/js/LocalStore.js";
import ayQrcode from "@/components/comm/ay-qrcode/ay-qrcode.vue";
import tabBarConntrl from "@/js/TabBarContrl.js";

const { proxy } = getCurrentInstance()
const props = defineProps({})
const modelValue = ref(false)
const modeQRlValue = ref(false)
const loading = ref(false)
const currInfo = ref({})
const query = ref({
    pfrom: 0,
    pnum: 20,
    ch: 1
})

const wxPayCodeurl = ref("");
const wh = ref(200);
const modal_qr = ref(false);


// 提交创建订单
const creatWxQrcode = async () => {
    if (!currInfo.value.id) {
       proxy.$message.error('请选择版本');
        return
    }
    let cp = await localStore.getCpInfo();
    try {
        let param = {
            ch: 1,
            cpid: cp.id,
            gd_ls: [{ gdid: currInfo.value.id, number: "1" }],
        }
        loading.value = true
        let res = await proxy.$api({ url: config.sysbuy_order_add, data: param });
        if (res.status == 1) {
            creatQrcode(res.data);
        }
        loading.value = false
    } catch (error) {
        loading.value = false
    }
}

/***微信支付二维码数据*****/
const creatQrcode = async (data) => {
    let cp = await localStore.getCpInfo();
    let user = await localStore.getUserInfo();
    let param = {};
    param.timeline = Math.floor(new Date().getTime() / 1000); //当前时间戳，校验sign过期需要
    param.paytype = 'wxntv';
    param.objtype = '04';
    param.objid = data.odid;
    param.money_pay = currInfo.value.price;
    param.cpid = cp.id;
    param.uid = user.uid;
    https.wxPayQrcode(param, back);
    function back(data) {
        if (!data) return;
        if (data.status == 1) {
            if (!data.data) return;
            data = data.data;
            wxPayCodeurl.value = data.pay_param.code_url;
            modeQRlValue.value = true
            showQrcode()
        }
    }
}

const showQrcode = () => {
    modal_qr.value = true;
    uni.showLoading(
        {
            title: "加载中...",
            mask: true
        });
    setTimeout(() => {
        uni.hideLoading();
        proxy.$refs.qrcode.crtQrCode();
    }, 500);
}

// 完成支付
const compPayHandle = () => {
    tabBarConntrl.close();
    // modeQRlValue.value = false
    // wxPayCodeurl.value = ''
    // currInfo.value = {}
    // modelValue.value = false
}

const listData = ref([])
const getDevsetList = async () => {
    try {
        let param = {
            ...query.value,
        }
        loading.value = true
        let res = await proxy.$api({ url: config.sysbuy_goods_list, data: param });
        if (res.status == 1) {
            let list = res?.data?.ls || []
            if (list && list.length > 0) {
                listData.value = listData.value.concat(list || [])
            }
        }
        loading.value = false
    } catch (error) {
        loading.value = false
    }
}

const chooseHandle = (item) => {
    currInfo.value = item
}

const open = () => {
    wxPayCodeurl.value = ''
    listData.value = []
    currInfo.value = {}
    modelValue.value = true
    nextTick(() => {
        getDevsetList()
    })
}

const close = () => {
    modelValue.value = false
    wxPayCodeurl.value = ''
}

const closeQr = () => {
    modeQRlValue.value = false
    wxPayCodeurl.value = ''
}

onMounted(() => { })
onBeforeUnmount(() => { })
onUnmounted(() => { })
defineExpose({
    open,
    close
})

</script>

<style lang="scss" scoped>
.dialog-content {
    display: flex;
    flex-direction: column;
    height: 550px;

    &-header {
        margin-bottom: 10px;
    }

    &-body {
        flex: 1 1 auto;
        overflow: auto;
    }

    &-footer {
        margin: 14px 0 0 0;
    }
}

.list-cell {
    border-radius: 8px;
    padding: 10px;
    background-color: #f5f7fa;
    margin-bottom: 10px;
    border: 1px solid #f5f7fa;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease-in-out;

    .selete_img {
        position: absolute;
        top: 0;
        right: 0;
        height: 20px;
        width: 20px;
    }
}

.list-cell:hover {
    background-color: rgba(108, 159, 241, 0.2);
}

.active {
    background-color: rgba(108, 159, 241, 0.2);
}
</style>